<template>
  <div class="column-card">
    <em-card
      :title="headerOptions.title"
      no-border
      :background="background"
    >
      <template
        v-if="headerOptions.tag"
        slot="subtitle"
      >
        <card-tag-cell v-model="headerOptions.tag" />
      </template>
      <template
        v-if="headerOptions.linkText"
        slot="toolbar"
      >
        <span>{{ headerOptions.linkText }}</span>
        <em-icon
          v-if="headerOptions.weblink"
          name="arrow-right"
        />
      </template>
      <div class="goods-list">
        <em-goods-block
          v-for="(goods,index) in goodsList"
          :key="index"
          :thumb="goods.thumb"
          :title="goods.title"
          title-inner
          :show-title="showItemTitle"
          centered
          :price="goods.price"
          :origin-price="goods.originPrice"
        />
      </div>
    </em-card>
  </div>
</template>

<script>
import CardTagCell from './CardTagCell'
import { backgroundImage } from '@/utils/styles'
export default {
  name: 'FenceColumnCard',
  components: {
    CardTagCell
  },
  props: {
    value: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      header: {
        title: '',
        tag: '',
        linkText: 'more',
        weblink: null
      },
      showItemTitle: false
    }
  },
  computed: {
    options() {
      return this.value
    },
    styles() {
      if (this.options && this.options.styles) {
        return this.options.styles
      }
      return null
    },
    headerOptions() {
      if (this.options && this.options.header) {
        return this.options.header
      }
      return this.header
    },
    setting() {
      if (this.options && this.options.setting) {
        return this.options.setting
      }
      return null
    },
    background() {
      return backgroundImage(this.styles && this.styles.background)
    },
    columnSize() {
      if (this.setting && this.setting.cols) {
        return this.setting.cols
      }
      return 3
    },
    goodsList() {
      var items = this.options.items || []
      return items.concat(
        new Array(this.columnSize - items.length).fill({
          thumb:
            'https://multi.niuteam.cn/public/static/ext/diyview/img/crack_figure.png',
          title: '商品名称',
          originPrice: '139.00',
          price: '99.00'
        })
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.column-card {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  min-width: 0;
  max-width: 100%;
  padding: 0 10px;
  .em-card__header {
    padding: 10px 0;
    min-height: initial;
  }
  .em-card__body {
    padding: 0;
  }
  .goods-list {
    display: flex;
    > * {
      flex: 1;
      margin-left: 10px;
      &:first-child {
        margin-left: 0;
      }
    }
  }
}
</style>
